<template>
    <view class="page" v-if="isLoad">

        <view class="fwa bgf nav1">
            <view class="navItem" :class="active1==j?'active':''" v-for="i,j of nav1" @click="active1=j;getD(1)">{{i}}
            </view>
        </view>

        <view class="fwa">
            <view class="navItem" :class="active==j?'active':''" v-for="i,j of nav" @click="active=j;getD(1)">{{i}}
            </view>
        </view>

        <view v-if="list.length==0" class="noD">暂无数据</view>
        <view class="item rel" v-for="i,j of list">
            <view class="abs del" v-if="role=='总经理'||role=='董事长' ||1" @click.stop="del(i,j)">删除</view>
            <!-- <image :src="i.img" mode="widthFix" class="img"></image> -->
            <view class="t">视频标题: {{i.title}}</view>
            <view class="t">
                网盘地址: {{i.url||''}}
            </view>
            <view class="t fwb fhc rel ">
                提取码: {{i.tqm||''}}
                <view @click="copyFn(i)" class="c1296db">复制</view>
            </view>
        </view>


        <view v-if="0" class="item rel" v-for="i,j of list" @click="to(i)">
            <view class="abs del" v-if="role=='总经理'||role=='董事长' ||1" @click.stop="del(i,j)">删除</view>
            <image :src="i.img" mode="widthFix" class="img"></image>
            <view class="t">{{i.title}}</view>
        </view>
    </view>
</template>

<script>
    import api from '@/api/api.js';
    export default {
        data() {
            return {

                nav1: ['新员工专区', '老员工专区'],
                active1: 0,
                nav: ['业务员', '贷后', '执行', '其他'],
                active: 0,
                isLoad: 0,
                role: '',
                list: [

                ]
            }
        },
        onLoad(o) {
            this.getD(1)
        },
        onShow() {
            this.role = this.getS('role')
        },
        methods: {
            copyFn(i) {
                uni.setClipboardData({
                    data: `网盘地址: ${i.url} 提取码: ${i.tqm}`,
                    complete: (e) => {
                        console.log(666, e);
                    }
                })
            },
            to(i) {
                this.setS('video', i)
                uni.navigateTo({
                    url: `/pages/user/videoD`
                })
            },
            del(i, j) {
                uni.showModal({
                    content: `确定删除该视频吗`,
                    success: (r) => {
                        if (r.confirm) {
                            api.delVideo({
                                videoIds: [i.id]
                            }).then(r => {
                                this.toast(`删除成功`)
                                this.list.splice(j, 1)
                            })
                        }
                    }
                })
            },
            getD(reset) {
                if (reset) {
                    this.list = []
                }
                api.getVideo({
                    type: this.active + 1,
                    videoType: this.active1 + 1,
                }).then(r => {
                    console.log(r);
                    this.list = r.rows.map(i => {
                        return {
                            id: i.videoId,
                            img: i.title,
                            title: i.content,
                            src: i.videoUrl,
                            tqm: i.netPassword,
                            url: i.netUrl,
                        }
                    })
                    this.isLoad = 1
                })

            }
        }
    }
</script>

<style lang="scss">
    page {
        height: 100%;
        background-color: #f5f5f5;
    }

    .page {
        padding: 30rpx;
        padding-top: 0;

        .item {
            background-color: #fff;
            border-radius: 20rpx;
            margin-bottom: 20rpx;
            overflow: hidden;
            padding: 20rpx;

            .img {
                width: 100%;
            }

            .t {
                padding: 10rpx 20rpx;
                margin-bottom: 0rpx;
            }
        }
    }

    .navItem {
        padding-bottom: 20rpx;
    }

    .active {
        font-size: 32rpx;
        font-weight: 800;
        color: #39b54a;
    }

    .del {
        right: 30rpx;
        top: 30rpx;
        color: #ccc;
        z-index: 99;
    }

    .nav1 {
        width: 750rpx;
        position: relative;
        left: -32rpx;
        padding-top: 24rpx;
        margin-bottom: 20rpx;
    }
</style>